<template>
  <el-dialog
    width="80%"
    @open="handleOpen"
    @close="handleClose"
    title="详情"
    :visible="dialogVisible"
  >
    <el-form :model="detailData" label-width="120px" label-position="left">
      <h1>租房合同</h1>
      <el-row v-if="user && owner">
        <el-col :span="6">
          <el-form-item label="甲方">
            <el-image
              style="height: 80px;width: 80px"
              :src="user.userInfo.picture || require('@/common/img/null.jpg')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="甲方用户名">
            {{ user.userInfo.firstName + user.userInfo.lastName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="乙方">
            <el-image
              style="height: 80px;width: 80px"
              :src="owner.userInfo.picture || require('@/common/img/null.jpg')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="乙方用户名">
            {{ owner.userInfo.firstName + owner.userInfo.lastName }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="附加信息">
            {{ detailData.content }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="ask">
        <el-col :span="6">
          <el-form-item label="开始时间">
            {{ ask.startTime | timeFilter }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="结束时间">
            {{ ask.endTime | timeFilter }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="约定租金">
            {{ ask.rent }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="甲方">
            {{ detailData.status | oneStatusFilter }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="乙方">
            {{ detailData.status | twoStatusFilter }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="是否生效">
            {{ detailData.status | threeStatusFilter }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import detailDialog from "../../../mixins/detailDialog";

export default {
  name: "detailDialog",
  mixins: [detailDialog],
  data() {
    return {
      detailData: {
        content: "",
        status: "",
        ask: {}
      },
      getDetailUrl: "/api/lease/lease"
    };
  },
  computed: {
    user() {
      return this.detailData?.ask?.user;
    },
    house() {
      return this.detailData?.ask?.house;
    },
    owner() {
      return this.detailData?.ask?.house?.user;
    },
    ask() {
      return this.detailData?.ask;
    }
  }
};
</script>

<style scoped></style>
